import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/router/permission' // 只是为了让webpack一并打包, 执行里面的路由前置守卫, 而且也没有导出, 所以不用变量接收
import store from './store'
import 'amfe-flexible'
import diretvieObj from './utils/directive'
import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css' // 代码高亮的样式
import { Button, NavBar, Form, Field, Toast, Tabbar, TabbarItem, Icon, Tab, Tabs, Cell, CellGroup, List, PullRefresh, ActionSheet, Popup, Row, Col, Badge, Search, Divider, Tag, Image, Dialog, DatetimePicker, Loading, Lazyload } from 'vant'

Vue.use(Lazyload, {
  preLoad: 1.0 // 图片开始加载判断范围
  // 1.0 (出现在视口就加载)
  // 1.3 (多往下加载30%范围)
})

Vue.use(Loading)
Vue.use(DatetimePicker)
Vue.use(Dialog)
Vue.use(Image)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(Search)
Vue.use(Row)
Vue.use(Col)
Vue.use(Badge)
Vue.use(Popup)
Vue.use(ActionSheet)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Toast)
Vue.use(Form)
Vue.use(Field)
Vue.use(NavBar)
Vue.use(Button) // 全局注册Button组件
// Vue.use()中间件函数, 调用()里对象的install方法
// Vue.use(), 调用()里函数本身或者install方法
// install方法里 Vue.component('van-button', 组件内对象)

Vue.use(diretvieObj)
Vue.config.productionTip = false
Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
  const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
  highlight.forEach((block) => {
    hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言) - 额外添加样式
  })
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 目标1: 引入vant组件库, 使用
// 1. 下载vant组件库 (yarn add vant)
// 2. 自动按需引入到工程, 需要一个插件 (yarn add babel-plugin-import -D)
// 3. babel.config.js里, 填入文档上配置(复制) - 重启服务器
// 4. main.js - 引入vant组件 - 全局注册
// 5. 任意.vue组件内, 使用van-开头的全局组件

// 目标2: 移动端适配
// 思路: vant组件库以及我们自己写px单位, 都变成rem
// 1. html的font-size(单位px), 值(flexible.js)
// flexible.js (获取html的宽度 / 10)
// 2. 找一个基准
// 参照iphone6机型来还原我们的设计图
// 375px宽度, 所以iphone6机型下,375/10 -> html的font-size: 37.5px;
// 3. 把除了html以外子标签们, (px单位换成rem单位)
// 例如: 我在iphone6设计图上(1:1), 量出宽度200的图片
// 设置img标签的宽度为200px / 37.5
// (1): 拿计算器
// (2): px to rem插件
// (3): 工程化(yarn管理包, webpack分析编译代码-集成功能)
// webpack+postcss+postcss-pxtorem
// 打包时, 帮我把所有style里(标签里的它不管)px单位, 转成rem单位

// 步骤:
// 1. 下载postcss postcss-pxtorem@5.1.1 amfe-flexible
// 2. postcss.config.js -> 填入文档的配置
// 3. main.js 引入flexible.js
